import React from 'react';
import { PropertyEditor } from '../core/PropertyEditor';
import './PropertyEditorComponent.less';

interface PropertyEditorComponentProps {
  editor: PropertyEditor;
  value: any;
  onChange: (newValue: any) => void;
}

/**
 * PropertyEditorComponent - Renders a property editor
 * This component takes a PropertyEditor instance and renders the appropriate UI
 */
const PropertyEditorComponent: React.FC<PropertyEditorComponentProps> = ({ 
  editor, 
  value, 
  onChange 
}) => {
  // Call the editor's render method to get the editor configuration
  const editorConfig = editor.render(value, onChange);
  const hasError = !!editorConfig.error;

  // Common classes for the wrapper
  const getWrapperClasses = () => {
    const classes = ['mini-xaf-property-editor', `${editorConfig.type}-property-editor`];
    if (hasError) classes.push('has-error');
    return classes.join(' ');
  };

  // Render the appropriate editor based on the configuration
  switch (editorConfig.type) {
    case 'string':
      return (
        <div className={getWrapperClasses()}>
          <label>{editorConfig.caption}{editorConfig.required && <span className="required-mark">*</span>}</label>
          <input
            type="text"
            value={editorConfig.value}
            onChange={(e) => editorConfig.onChange(e.target.value)}
            disabled={editorConfig.readOnly}
            maxLength={editorConfig.maxLength}
            minLength={editorConfig.minLength}
            pattern={editorConfig.pattern}
          />
          {hasError && <div className="error-message">{editorConfig.error}</div>}
        </div>
      );

    case 'number':
      return (
        <div className={getWrapperClasses()}>
          <label>{editorConfig.caption}{editorConfig.required && <span className="required-mark">*</span>}</label>
          <input
            type="number"
            value={editorConfig.value ?? ''}
            min={editorConfig.min}
            max={editorConfig.max}
            step={editorConfig.step}
            onChange={(e) => editorConfig.onChange(e.target.value !== '' ? parseFloat(e.target.value) : null)}
            disabled={editorConfig.readOnly}
          />
          {hasError && <div className="error-message">{editorConfig.error}</div>}
        </div>
      );

    case 'boolean':
      return (
        <div className={getWrapperClasses()}>
          <label>
            <input
              type="checkbox"
              checked={editorConfig.value}
              onChange={(e) => editorConfig.onChange(e.target.checked)}
              disabled={editorConfig.readOnly}
            />
            {editorConfig.caption}{editorConfig.required && <span className="required-mark">*</span>}
          </label>
          {hasError && <div className="error-message">{editorConfig.error}</div>}
        </div>
      );

    case 'date':
      return (
        <div className={getWrapperClasses()}>
          <label>{editorConfig.caption}{editorConfig.required && <span className="required-mark">*</span>}</label>
          <input
            type="date"
            value={editorConfig.value}
            min={editorConfig.min}
            max={editorConfig.max}
            onChange={(e) => editorConfig.onChange(e.target.value ? new Date(e.target.value) : null)}
            disabled={editorConfig.readOnly}
          />
          {hasError && <div className="error-message">{editorConfig.error}</div>}
        </div>
      );

    case 'dropdown':
      return (
        <div className={getWrapperClasses()}>
          <label>{editorConfig.caption}{editorConfig.required && <span className="required-mark">*</span>}</label>
          <select
            value={editorConfig.value ?? ''}
            onChange={(e) => editorConfig.onChange(e.target.value || null)}
            disabled={editorConfig.readOnly}
          >
            <option value="">-- Select --</option>
            {editorConfig.items.map((item: any, index: number) => (
              <option key={index} value={item.value}>
                {item.text}
              </option>
            ))}
          </select>
          {hasError && <div className="error-message">{editorConfig.error}</div>}
        </div>
      );

    default:
      return (
        <div className={getWrapperClasses()}>
          <label>{editorConfig.caption}{editorConfig.required && <span className="required-mark">*</span>}</label>
          <div className="error-message">Unknown editor type: {editorConfig.type}</div>
        </div>
      );
  }
};

export default PropertyEditorComponent;
